<template>
<div class="custom-header" :class="{'collapse-open':!isCollapse}">
    <el-container>
        <el-header style="--el-header-padding:0 0;--el-header-height:auto;">
            <div class="header-info">
                <el-avatar
                :size="32"
                class="mr-3"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
            </div>
            <el-divider border-style="dashed" style="margin:0" />
        </el-header>
        <el-main style="--el-main-padding:0 0;">
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                :collapseTransition="false"
                @open="handleOpen"
                @close="handleClose"
            >
                <menu-item v-for="(item) in menuData" :key="item.index" :item="item"></menu-item>
            </el-menu>
        </el-main>
    </el-container>
  <div @click="isCollapse = !isCollapse" class="custom-collapse"> {{ isCollapse ? '>' : '<'}}</div>
</div>
</template>

<script lang="ts" setup>
import { ref, shallowRef, defineComponent } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const menuData = ref([
    {
        name:'测试',
        id:'1',
        icon:shallowRef(Location),
        group:[
            {
                name:'组-1',
                children:[
                    {name:'测试1-1',id:'1-1'},
                    {name:'测试1-2',id:'1-2'},
                ], 
            },
            {
                name:'组-2',
                children:[
                    {name:'测试1-1',id:'1-5'},
                    {name:'测试1-2',id:'1-6'},
                ], 
            }
        ],
        children:[
            {
                name:'测试1-3',
                id:'1-3',
                group:[
                    {
                        name:'测试1-3-1',
                        children:[
                            {
                                name:'测试1-3-1',
                                id:'1-3-1',
                                children:[
                                    {name:'测试1-3-1-1',id:'1-3-1-1'},
                                    {name:'测试1-3-1-2',id:'1-3-1-2'},
                                ]
                            },
                            {name:'测试1-3-1-3',id:'1-3-1-3'},
                        ]
                    }
                ],
            },
            {name:'测试1-4',id:'1-4'},
        ],
    },
    {
        name:'测试2',
        id:'2',
        icon:shallowRef(Document),
        children:[
            {name:'测试2-1',id:'2-1'},
            {name:'测试2-2',id:'2-2'},
        ]
    },
    {
        name:'测试3',
        id:'3',
        icon:shallowRef(Setting),
        children:[
            {name:'测试3-1',id:'3-1'},
            {name:'测试3-2',id:'3-2'},
        ]
    },
    {
        name:'测试4',
        id:'4',
        icon:shallowRef(IconMenu),
    },
    ])

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  min-height: 400px;
}
.el-menu-vertical-demo {
  height: 100%;
}
</style>
<style scoped>

.custom-header {
    position: relative;
    height: 100%;
    display: flex;
}
.custom-header.collapse-open .custom-collapse{
    right: -5px;
}
.custom-header.collapse-open .header-info{
    text-align: left;
    margin-left: calc(var(--el-menu-base-level-padding));
}
.custom-collapse {
    position: absolute;
    cursor: pointer;
    right: -14px;
    top: 50%;
    transform: translateX(-50%);
}
.header-info {
    text-align:center;
    padding:10px 0
}
</style>